<template>
  <h2>和为:{{ sum }}</h2>
  <button @click="sum++">点我加一</button>
  <hr />
  <h2>鼠标点击坐标: x: {{ point.x }} | y:{{ point.y }}</h2>
  <br />
</template>

<script>
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import usePoint from '../hooks/usePoint';
export default {
  name: "Demo",
  /* 
  beforeCreate() {
    console.log('--beforeCreate--');
  },
  created() {
    console.log('--created--');
  },
  beforeMount() {
    console.log('--beforeMount--');
  },
  mounted() {
    console.log('--mounted--');
  },
  beforeUpdate() {
    console.log('--beforeUpdate--');
  },
  updated() {
    console.log('--updated--');
  },
  beforeUnmount() {
    console.log('--beforeUnmount--');
  },
  unmounted() {
    console.log('--unmounted--');
  }, */
  //#endregion
  setup(props, context) {
    let sum = ref(0);
    
    let point = usePoint();
    
    return {
      sum,point
    };
  },
};
</script>